<template>
    <view class="contentsed">
        <!-- <personalInfo />
        <div class="bodys">
            <image
                src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202342.png"
                mode="widthFix" />
        </div>
        <div style="height: 20rpx;"></div>
        <div class="body">
            <div class="body-flex">
                <div v-for="item in cardFilter" style="width: 24%;" @click="targetPages(item)">
                    <div style="display: flex;justify-content: center;">
                        <image :src="item.img" mode="scaleToFill" />
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 20rpx;"></div>
        <div class="flex">
            <div class="flexOne">
                <div style="display: flex;justify-content: space-between;">
                    <div style="display: flex;align-items: center;width: 70%;">
                        <div>
                            <image style="width: 35rpx;height: 35rpx;"
                                src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2Ftrending-up%201.png" />
                        </div>
                        <div style="margin-left: 3%;">巡检中</div>
                    </div>
                    <div style="width: 30%;display: flex;justify-content: flex-end;">
                        <image style="width: 70rpx;height: 70rpx;"
                            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202377.png" />
                    </div>
                </div>
                <div class="num">40%</div>
                <div style="height: 10rpx;"></div>
                <div class="content">
                    预防故障发生：通过定期巡检可以及时发现设备潜在的问题，如磨损、松动、过热
                </div>
                <div style="height: 10rpx;"></div>
                <image style="width: 100%;"
                    src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FVector%201.png"
                    mode="widthFix" />
                <div style="height: 10rpx;"></div>
                <div
                    style="display: flex;align-items: center;justify-content: space-between;color: #000000;font-weight: 500;">
                    <div>巡检情况</div>
                    <div>4/10</div>
                </div>
                <div style="height: 10rpx;"></div>
                <u-line-progress :showText="false" inactiveColor="#d2e4c0" :percentage="30"
                    activeColor="#121212"></u-line-progress>
            </div>
            <div class="flexTwo">
                <div style="display: flex;justify-content: space-between;">
                    <div style="display: flex;align-items: center;width: 70%;">
                        <div>
                            <image style="width: 35rpx;height: 35rpx;"
                                src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2Ftrending-up%202.png" />
                        </div>
                        <div style="margin-left: 3%;color: #fff;">维保中</div>
                    </div>
                    <div style="width: 30%;display: flex;justify-content: flex-end;">
                        <image style="width: 70rpx;height: 70rpx;"
                            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202377.png" />
                    </div>
                </div>
                <div class="nums">60%</div>
                <div style="height: 10rpx;"></div>
                <div class="contents">
                    预防故障发生：通过定期巡检可以及时发现设备潜在的问题，如磨损、松动、过热
                </div>
                <div style="height: 10rpx;"></div>
                <image style="width: 100%;"
                    src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FVector%202.png"
                    mode="widthFix" />
                <div style="height: 10rpx;"></div>
                <div
                    style="display: flex;align-items: center;justify-content: space-between;color: #edfcdf;font-weight: 500;">
                    <div>维保情况</div>
                    <div>4/10</div>
                </div>
                <div style="height: 10rpx;"></div>
                <u-line-progress :showText="false" inactiveColor="#979797" :percentage="30"
                    activeColor="#d2e4c0"></u-line-progress>
            </div>
        </div>
        <div style="height: 10rpx;"></div>
        <div style="margin-left: 5%;font-size: 17px;font-weight: 700;">培训情况</div> -->
        <!--  -->
        <personalInfo :name="userInfo.nickName" :standing="userInfo.remark" />
        <view>
            <content v-if="showState == 'content'"></content>
            <my v-if="showState == 'person'"></my>
        </view>
        <view class="fix_bar">
            <Bar @changeState="changeState" :showState="showState" />
        </view>
    </view>
</template>


<script>
import { infoFb } from '../api/api.js'
import content from '../index/content.vue'
import my from '../index/my.vue'
import Bar from '../pagesCompontents/tabBars/index.vue';
import personalInfo from '../pagesCompontents/personal-info.vue'
export default {
    components: {
        personalInfo,
        my,
        Bar,
        content
    },
    data() {
        return {
            title: '',
            cardFilter: [
                // { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2FGroup%202404.png', label: '通知', name: 'notify' },
                { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202354.png', label: '大屏', name: 'largeScreen' },
                { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202356.png', label: '维保', name: 'repairMaintain' },
                { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202355.png', label: '巡检', name: 'inspect' },
                { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202357.png', label: '知识库', name: 'knowledgeBase' },
            ],
            card: [],
            showState: 'content',
            nickName: '',
            userInfo: {}
        }
    },
    methods: {
        changeState(state) {
            console.log('state-->', state);
            this.showState = state
        },
        targetPages(i) {
            console.log(i);
            uni.setStorageSync('pageIndent', i.label)
            if (i.label == '通知') {
                uni.navigateTo({
                    url: '/pagesPlant/index/notice',
                })
            } else if (i.label == '维保' || i.label == '巡检' || i.label == '知识库') {
                uni.navigateTo({
                    url: '/pagesScreen/index/pagesPlantMaintenance'
                })
            } else if (i.label == '大屏') {
                uni.navigateTo({
                    url: '/pagesScreen/index/pagesPlantScreen'
                })
            }
        }
    },
    onLoad() {

    },
    onShow() {
        // this.card = [
        //     { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2FGroup%202404.png', label: '通知', name: 'notify' },
        //     { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2FGroup%202405.png', label: '大屏', name: 'largeScreen' },
        //     { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2FGroup%202406.png', label: '维保', name: 'repairMaintain' },
        //     { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2FGroup%202407.png', label: '巡检', name: 'inspect' },
        //     { img: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2FGroup%202408.png', label: '知识库', name: 'knowledgeBase' },
        // ]
        let info = uni.getStorageSync('userInfo').treatmentOperatorMenu;
        this.userInfo = uni.getStorageSync('userInfo')
        console.log(info, 'info');
        const filteredArr = [];
        this.cardFilter.forEach(item => {
            if (info[item.name] === 1) {
                filteredArr.push(item);
            }
        });
        // console.log(filteredArr,'console.log(filteredArr);');
        this.card = filteredArr;
        infoFb().then(res => {
            console.log(res.data, 'res.data');
            this.title = res.data.data;
        })
    }
}
</script>

<style lang="scss">
// .content {
//     display: flex;
//     flex-direction: column;
//     background-color: #f2f8f5;
//     min-height: 100vh;
// }

.fix_bar {
    position: fixed;
    bottom: 40rpx;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.body {
    width: 90%;
    margin-left: 5%;
}

.body image {
    width: 130rpx;
    height: 130rpx;
}

.bodys {
    width: 90%;
    margin-left: 5%;
}

.flexOne {
    padding: 10px;
    background-color: #edfcdf;
    border-radius: 15px;
    width: 42%;
}

.flexTwo {
    padding: 10px;
    background-color: #122121;
    border-radius: 15px;
    width: 42%;
}

.bodys image {
    width: 100%;
}

.body-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex {
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flexOne {
    padding: 10px;
    background-color: #edfcdf;
    border-radius: 15px;
    width: 42%;
}

.flexTwo {
    padding: 10px;
    background-color: #122121;
    border-radius: 15px;
    width: 42%;
}

.num {
    font-size: 30px;
    font-weight: bold;
    color: #000000;
    margin-left: 1%;
}

.nums {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    margin-left: 1%;
}

// .content {
//     font-size: 13px;
//     color: black;
//     display: flex;
//     flex-direction: column;
//     background-color: #f2f8f5;
//     min-height: 100vh;
//     /* padding-bottom: 100rpx; */
// }

.contentsed {
    display: flex;
    flex-direction: column;
    background-color: #f2f8f5;
    min-height: 100vh;
}
</style>